import { Button, DatePicker, Input, NavBar } from 'antd-mobile'
import Icon from '@/components/Icon'
import './index.scss'
import classNames from 'classnames'
import { billListData } from '@/contants'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
import { addBillList } from '@/store/modules/billStore'
import { useDispatch } from 'react-redux'
import dayjs from 'dayjs'

const New = () => {
  const dispatch = useDispatch()
  const [billType, setBillType] = useState('pay')
  const navigate = useNavigate()
  const [money, setMoney] = useState(0)
  const [useFor, setuseFor] = useState('')
  const saveBill = () => {
    const data = {
      type: billType,
      money: billType === 'pay' ? Number(-money) : Number(money),
      date: currentDate,
      useFor,
    }
    dispatch(addBillList(data))
  }
  const [dateVisible, setDatevisible] = useState(false)
  const [currentDate, setCurrentDate] = useState(() => {
    return dayjs(new Date()).format('YYYY-MM')
  })
  const onConfirm = (date) => {
    setDatevisible(false)
    setCurrentDate(dayjs(date).format('YYYY-MM'))
  }
  return (
    <div className='keepAccounts'>
      <NavBar
        className='nav'
        onBack={() => navigate(-1)}>
        记一笔
      </NavBar>

      <div className='header'>
        <div className='kaType'>
          <Button
            shape='rounded'
            className={classNames(billType === 'pay' && 'selected')}
            onClick={() => setBillType('pay')}>
            支出
          </Button>
          <Button
            className={classNames(billType === 'income' && 'selected')}
            shape='rounded'
            onClick={() => setBillType('income')}>
            收入
          </Button>
        </div>

        <div className='kaFormWrapper'>
          <div className='kaForm'>
            <div
              className='date'
              onClick={() => setDatevisible(true)}>
              <Icon
                type='calendar'
                className='icon'
              />
              <span className='text'>
                {currentDate === dayjs(new Date()).format('YYYY-MM')
                  ? '今天'
                  : currentDate}
              </span>
              <DatePicker
                className='kaDate'
                title='记账日期'
                max={new Date()}
                visible={dateVisible}
                onCancel={() => setDatevisible(false)}
                onConfirm={onConfirm}
              />
            </div>
            <div className='kaInput'>
              <Input
                value={money}
                onChange={(money) => setMoney(money)}
                className='input'
                placeholder='0.00'
                type='number'
              />
              <span className='iconYuan'>¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className='kaTypeList'>
        {billListData[billType].map((item) => {
          return (
            <div
              className='kaType'
              key={item.type}>
              <div className='title'>{item.name}</div>
              <div className='list'>
                {item.list.map((item) => {
                  return (
                    <div
                      className={classNames(
                        'item',
                        useFor === item.type && 'selected'
                      )}
                      key={item.type}
                      onClick={() => setuseFor(item.type)}>
                      <div className='icon'>
                        <Icon type={item.type} />
                      </div>
                      <div className='text'>{item.name}</div>
                    </div>
                  )
                })}
              </div>
            </div>
          )
        })}
      </div>

      <div className='btns'>
        <Button
          className='btn save'
          onClick={saveBill}>
          保 存
        </Button>
      </div>
    </div>
  )
}

export default New
